<template>
    <div class="list">
        <h3 class="list-title">热门歌单</h3>
        <ul>
            <li class="list-item" v-for="item in songlist" :key="item.id">
                <div class="list-pic">
                    <img :src="item.imgurl" alt="">
                </div>
                <div class="list-text">
                    <h3 class="list-name" v-html="item.creator.name"></h3>
                    <p class="list-summary" v-html="item.dissname"></p>
                </div>
            </li>
        </ul>
    </div>

</template>
<script>
import {getList} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
    data() {
      return {
        songlist:[],

      }
    },
    created(){
        this._getList()
    },
    methods:{
        _getList() {
            getList().then((res) => {
                if (res.code === ERR_OK) {
                    this.songlist=res.data.list;
                }
            })
        },
    }
}
</script>
<style lang="stylus" scoped>
    @import "~assets/stylus/variable"
    .list
        .list-title
            height: 1.3rem
            line-height: 1.3rem
            text-align: center
            font-size: $font-size-medium
            color: $color-theme
        .list-item
            margin 0 .4rem .4rem
            display: flex
            box-sizing: border-box
            align-items: center
            .list-pic
                flex: 0 0 1.2rem
                width: 1.2rem
                padding-right: .4rem
                img 
                    width 100%
            .list-text
                display: flex
                flex-direction: column
                justify-content: center
                flex: 1
                line-height: .25rem
                overflow: hidden
                font-size: $font-size-medium
                .list-name
                    margin-bottom: .2rem
                    color: $color-text
                .list-summary
                    color: $color-text-d
</style>